<template>
  <el-menu
    class="guide-nav"
    mode="vertical"
    default-active="Guide"
    text-color="#8f98a7"
    active-text-color="#287cbb"
    unique-opened
    router>
    <template v-for="tag in tags">
      <!-- 多级导航 -->
      <template v-if="tag.subs">
        <el-submenu :index="tag.index" :key="tag.index">
          <template #title class="text">
            <i :class="tag.icon"></i>
            {{ tag.title }}
          </template>
          <template v-for="subItem in tag.subs">
            <el-submenu
              v-if="subItem.subs"
              :index="subItem.index"
              :key="subItem.index"
            >
              <template #title>{{ subItem.title }}</template>
              <el-menu-item
                v-for="(threeItem, i) in subItem.subs"
                :key="i"
                :index="threeItem.index"
              >
                {{ threeItem.title }}</el-menu-item
              >
            </el-submenu>
            <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{
              subItem.title
            }}</el-menu-item>
          </template>
        </el-submenu>
      </template>
      <!-- 无多级导航 -->
      <template v-else>
        <el-menu-item :index="tag.index" :key="tag.index">
          <template #title class="text">
            <i :class="tag.icon"></i>
            {{ tag.title}}
          </template>
        </el-menu-item>
      </template>
    </template>
  </el-menu>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'GuideNav',
  setup() {
    // 导航栏内容
    const tags = [
      {
        icon: 'el-icon-user-solid',
        index: 'customerservice',
        title: '咨询在线客服',
      },
      {
        icon: 'el-icon-user-solid',
        index: 'help',
        title: '查看出行帮助',
        subs: [
          {
            icon: 'el-icon-user-solid',
            index: 'insuranceClause1',
            title: '航空综合险条款',
          },
          {
            icon: 'el-icon-user-solid',
            index: 'insuranceClause2',
            title: '无忧退票险条款',
          },{
            icon: 'el-icon-user-solid',
            index: 'passengerClause',
            title: '乘客须知',
          }
        ]
      },{
        icon: 'el-icon-user',
        index: 'illustrate',
        title: '网站使用说明',
      },
      
    ];
    return {
      tags,
    };
  },
});
</script>

<style lang="scss" scoped>
.head-bar {
  height: 100%;
  padding: 0 20px;
  border-bottom: 0 !important;
}

</style>
